<template>
  <div class="addhouse">
    <hunk-head name="托管合同"></hunk-head>
    <div class="addhouseList">
      <uni-forms ref="form" :modelValue="formData" :rules="rules">
          <div class="housAdd">
            <div class="lable">合同编号  </div>
            <div class="address">
                {{formData.orderno}}
            </div>
          </div>
          <div class="housAdd">
            <div class="lable">公寓名称 </div>
            <div class="address">
                {{formData.deptname}}
            </div>
          </div>
           <div class="housAdd">
            <div class="lable">业主名称 </div>
            <div class="address">
                {{formData.unickname}}
            </div>
          </div>

            <div style="height:10px;background:#F9F9F9;"></div>

          <div class="housAdd" @click="jumpTo">
            <div class="lable">已选房源 <span class="red" >（点击查看）</span> </div>
            <div class="address">
                {{formData.trusteeshiprecord.length}}
                <img class="icon del2" v-if="baseUrl" :src="baseUrl+'imgs/imgs/right.png'" alt="" srcset="">
            </div>
          </div>
            <div style="height:10px;background:#F9F9F9;"></div>
            <uni-forms-item label="管理费率%" name="roomno" required :label-width="120">
              <div class="flex">
              {{formData.rate}}
              </div>
            </uni-forms-item>
            <uni-forms-item name="trusteeshiptype" label="托管类型" required :label-width="150">
              <div class="flex">
              {{formData.trusteeshiptype=='0'?'长期':'固定期限'}}
              </div>
            </uni-forms-item>

            <uni-forms-item name="payrent" v-if="formData.trusteeshiptype!='0'" label="托管截至时间" required :label-width="150">
                 <div class="flex">
                    {{formData.trusteeshipendtime}}
                </div>
            </uni-forms-item>
                <uni-forms-item name="payrent" label="履约保证金是否归属业主" required :label-width="200">
                 <div class="flex">
                  {{formData.bondowner=='0'?'否':'是'}}
                 </div>
            </uni-forms-item>
            <uni-forms-item  label="关联电子合同" name="showlowrent" required :label-width="120">
                <div class="flex flex2" @click="read">
                    <span>{{formData.code}}</span> 
                    <!-- <img class="icon del2" v-if="baseUrl" :src="baseUrl+'imgs/imgs/right.png'" alt="" srcset=""> -->
                </div>
            </uni-forms-item>
        <div class="btn">
            <button class="subBtn" @click="goBack">返回</button>
        </div>
      </uni-forms>
    </div>
    <uni-popup ref="approve" type="center">
      <div class="tips2">
        <div class="tips-top">提示</div>
        <div class="tips-text">尊敬的用户，您还未进行用户授权，是否进行用户授权？</div>
        <div class="tips-btn">
          <div class="btn-closs" @click="closeP">取消</div>
          <div  @click="checkedP">确认</div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
import Head from '@componentsMine/head'
import {trusteeshipInfo,confirmcontract} from '@/apis/trusteeship'
import {GetUserInfo_openid,getuseropenid} from '@/apis/user'
import { setToken } from '@utils/auth'
import store from '@store/index'

export default {
  components: {
    'hunk-head': Head
  },
  data() {
    return {
      payMode: [{"value": 1,"text": "是"},{"value": 0,"text": "否"    }],
      payMode2: [{"value": 0,"text": "长期"},{"value": 1,"text": "固定期限"    }],
      formData: {
        deptname: "",
        unickname: "",
        bondowner: 0,
        confirmtime: null,
        confirmuserid: null,
        createtime: "",
        deptid: '',
        econtractid: '',
        orderno: "",
        rate: '',
        state: 0,
        trusteeshipendtime: "",
        trusteeshiprecord:[],
        trusteeshiptype: 0,
        type: 0,
        userid: '',
        wid: '',
      },
      rules: {
       
      },
    }
  },
  created(){
  },
  onLoad(el){
    this.isShouquan().then(e=>{
      this.trusteeshipInfo(el.wid,el.deptname,el.unickname)
      this.formData.trusteeshiprecord = el.data
    })
  },
  computed: {
    userid(){
      return this.$store.state.baseStore.userInfo.userid
    },
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL;
    }
  },
  methods: {
    read(){
         uni.downloadFile({
          url: this.formData.fileurl,
          success:(res)=> {
            var filePath = res.tempFilePath;
            this.pdfPath = filePath
            uni.openDocument({
              filePath: filePath,
              showMenu: true,
              success:(res) =>{
                    uni.hideLoading()
                this.isRead = true
                console.log('打开文档成功');
              }
            });
          }
        });
    },
     jumpTo(){
      let data = {
        houseLits: this.formData.trusteeshiprecord.map(e=>e.houseroomid),
        shareUserId:this.userid,
        isList:true
      }
      uni.navigateTo({
        url:'/subPackage/link/index?query='+JSON.stringify(data)
      })
    },
    goBack(){
      uni.navigateBack(-1)
    },
    trusteeshipInfo(wid,deptname,unickname){
      trusteeshipInfo({wid}).then(e=>{
        if(+e.code===200){
          this.formData = e.data
          this.formData.deptname = deptname
          this.formData.unickname = unickname
        }
      })
    },
    checkedP(){
      this.$refs.approve.close()
      uni.navigateTo({ url: '/pages/link/approve' })
    },
    closeP(){
      this.$refs.approve.close()
      uni.reLaunch({ url: '/pages/login/checkUser' })
    },
     isShouquan(){
      return new Promise((reslove,reject)=>{
          let that = this
          wx.login({
            success:(res)=> {
              console.log('login',res)
              var code = res.code
              getuseropenid({code}).then(e=>{
                console.log('getuseropenid',typeof(e.data.openid),e.data.openid)
                // if(e.data.openid != 'null'){
                  wx.setStorageSync('openid', e.data.openid)
                  wx.setStorageSync('session_key', e.data.session_key)
                  GetUserInfo_openid({openid:e.data.openid}).then(e=>{
                    console.log('执行GetUserInfo_openid',e)
                    that.isCode = true
                    if(e.code == 200){
                      store.commit('baseStore/SET_USERINFO', e.data)
                      setToken(e.data.token)
                    }else if(e.code == 300){
                      that.$refs.approve.open()
                    }

                    reslove()
                  })
                // }else{
                //   that.isCode = false
                //   that.$refs.wxpopup.open()
                // }
              })
            }
          })
      })
    },
    submit(){
      confirmcontract({
        	"confirmuserid": this.userid,
          "state": 1,
          "wid": this.formData.wid
      }).then(e=>{
        uni.redirectTo({ url: '/pages/index/index' })
      })
    },
 
  }
}
</script>

<style lang="scss" scoped>
.addhouse ::v-deep .uni-forms-item{
    border-bottom: 1px solid #EFEFEF!important;
}
 .del2{
    margin-left: 8px;
    position: relative;
    top: 3px;
}
.icon{
    width: 9px;
    height: 15px;
}
.placeholder{
    color: #9B9B9B;
}
.flex2{
  span{
        color: #0191FF;
    }
}
.flex{
    line-height: 45px;
  
}
.addhouse {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .addhouseList{
    flex: 1;
    background: #F9F9F9;
    overflow-y: auto;
  }
  
}
::v-deep .uni-forms{
  background: #FFFFFF;
  .uni-forms-item{
    // height: 45px;
    margin: 0 15px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFEFEF;
    .uni-forms-item__box{
      .uni-error-message{
        right: 0;
        left: auto;
        .uni-error-message-text{
          line-height: 10px;
          font-size: 10px;
        }
      }
      .uni-forms-item__inner{
        margin: 0;
        padding: 0;
      }
    }
    
    .uni-forms-item__label{
      padding: 0;
      height: 45px;
      .label-text{
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 21px;
        margin-left: 4px;
      }
    }
    .uni-forms-item__content{
      height: 45px;
      text-align: right;
      .uni-data-checklist{
        margin-bottom: 6px;
        height: 33px;
        .checklist-group{
          height: 100%;
          justify-content: flex-end;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #4A4A4A;
          line-height: 35px;
          .checklist-box.is--tag.is-checked{
            background-color: rgb(245, 245, 245);
            color: #FFBD6C;
          }
          .checklist-box{
            position: static;
            margin: 0;
            margin-right: 20px;
          }
          .checklist-box:last-child{
            margin-right: 0;
          }
        }
      }
      .uni-easyinput{
        .uni-easyinput__content{
          .uni-easyinput__content-input{
            height: 45px;
            text-align: right;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            line-height: 45px;
            color: #4A4A4A;
            .uni-easyinput__placeholder-class{
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              line-height: 45px;
              color: #9B9B9B;
              
            }
          }
        }
      }
      .uni-date{
        .uni-date-editor{
          div{
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #9B9B9B;
            line-height: 45px;
          }
        }
      }
      .address{
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4A4A4A;
        line-height: 18px;
      }
    }
  }
  .uni-forms-item:last-child{
    border: 0;
  }
  .housAdd{
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    .lable{
      width: 150px;
      height: 21px;
      font-size: 15px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 21px;
      .red{
          color: #FF5A65;
      }
    }
    .address{
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4A4A4A;
      line-height: 20px;
    }
  }
  .item1{
    border: 0;
  }
  .cycleItme{
    height: auto;
    .is-direction-left{
      flex-direction: column;
      .uni-forms-item__label{
        height: auto;
        margin-top: 13px;
      }
      .uni-forms-item__content{
        height: auto;
        .checklist-group{
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .typelist{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-top: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    .item-img{
      width: 59px;
      height: 30px;
      background: rgba($color: #898989, $alpha: 0.08);
      border: 1px solid #898989;
      border-radius: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4A4A4A;
      text-align: center;
      line-height: 30px;
    }
    .check-img{
      background: rgba($color: #FFAA58, $alpha: 0.08);
      border: 1px solid #FFAA58;
      color: #FFAA58;
    }
  }
  .roomFa{
    align-items: center;
    flex-direction: row;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 0;
    margin-bottom: 10px;
    .iiii{
      margin-right: 10px;
      margin-top: 10px;
      .item-img{
        padding: 6px 15px;
        box-sizing: border-box;
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4A4A4A;
        line-height: 18px;
        background: rgba($color: #898989, $alpha: 0.08);
        border-radius: 15px;
        border: 1px solid #9B9B9B;
      }
      .check-img{
        background: rgba($color: #FFAA58, $alpha: 0.08);
        border: 1px solid #FFAA58;
        color: #FFAA58;
      }
    }
    .iiii:nth-child(5){
       margin-right: 0;
    }
  }
  .addImg{
    margin: 15px 0 15px 15px;
    .imgbtn{
      width: 80px;
      height: 80px;
    }
  }
}
.btn{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 44px;
  .subBtn{
    width: 345px;
    height: 45px;
    background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
    box-shadow: 0px 2px 4px 0px rgba(252, 174, 55, 0.21), 0px 3px 5px 0px rgba(255, 216, 111, 0.14);
    border-radius: 100px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 45px;
    text-shadow: 0px 2px 4px rgba(252, 174, 55, 0.21);
  }
  .subBtn::after{
    border: 0;
  }
  uni-button:after {
    border: 0;
  }
}
.tips2{
    width: 335px;
    height: 174px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    .tips-top{
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4A4A4A;
      line-height: 22px;
      margin: 20px 0 30px 0;
    }
    .tips-text{
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6D7278;
      padding: 0 20px;
      line-height: 22px;
    }
    .tips-btn{
      width: 100%;
      border-top: 2px solid #EFEFEF;
      display: flex;
      position: absolute;
      bottom: 0;
      div{
        height: 40px;
        width: 50%;
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4A4A4A;
        line-height: 40px;
        text-align: center;
      }
      .btn-closs{
        border-right: 2px solid #EFEFEF;
      }
    }
  }
</style>
